﻿@model BudgetMealsUI.Models.AllMealsElementModel

<div class="ThumbnailWrapper" id="Meal@(Model.Meal.MealID)@(Model.Title.Replace(" ", ""))">
    <a href="@Url.Action("ShowRecipe", "Recipe", new { Id = Model.Recipe.RecipeID })">
        <div class="RecipeThumbnailTitle">@Model.Title $@Model.Recipe.Cost.ToString("N2")</div>
        <img height="150" width="150" src="@Url.Action("GetImage", "Recipe", new{recipeId=Model.Recipe.RecipeID, image=0})" alt="" /><br />
        <div class="ThumbnailDescription">@Model.Recipe.Name</div>
    </a>
    <script type="text/javascript">
        $("#Meal@(Model.Meal.MealID)@(Model.Title.Replace(" ", ""))").hover(
            function (event) {
                var content = "<h4>@(Model.Recipe.Name) $@Model.Recipe.Cost.ToString("N2") (@(Model.Title))</h4>@Html.Raw(Model.Recipe.Summary)"
                $("#RecipeSummary@(Model.Meal.MealID)").html(content);
            }
        );
    </script>
</div>